{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head%}

{{ super() }}
<link href="{{ url_for('static', filename='css/typing.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/carousel.css') }}" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
{% endblock %}

{% block page_content %}

{% if current_user.is_authenticated %}
<ol class="breadcrumb">
  <li class="active">首页</li>
  <li><a href="{{ url_for('.albums', username=current_user.username) }}">我的相册</a></li>
    <li><a href="{{ url_for('main.likes', username=current_user.username) }}">我的喜欢</a></li>
</ol>
<div class="container">
    <h3>我的关注</h3>
</div>
<hr>
<div class="container">
    <div class="row grid">
        {% for photo in photos[:50] %}
        {% if photo.album.no_public == False %}
            <div class="explore-image grid-item">
            <a class="thumbnail" href="{{ url_for('.photo', id=photo.id) }}" >
                <img class="img-responsive" src="{{ photo.url_t }}">
            </a>
            <div class="info">
              <span>上传于{{ moment(photo.timestamp).format('L') }}</span>
              <span>作者：<a href="{{ url_for('.albums', username=photo.author.username) }}" >{{ photo.author.name }}</a></span><br>
              <span>相册：<a href="{{ url_for('.album', id=photo.album.id) }}" >{{ photo.album.title }}</a></span>
            </div>
          </div>
        {% endif %}
        {% endfor %}
        
        {% if not photos %}
        <h4>你还没有关注任何人，先去<a href="{{ url_for('.explore') }}">探索</a>一下吧！</h4>
        {% endif %}
      </div>
    </div>

{% else %}
<div class="jumbotron" style="background: #fff; height: 500px;">
  <div class="container" align="center">
    <br><br><br>
    <h1>创建一个<span id="words"></span><span id="cursor">|</span>相册</h1>
    <br><br>
    <h2>
      <a class="btn btn-lg btn-primary btn-shadow" href="{{ url_for('auth.register') }}">立即注册</a>
    </h2>
  </div>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
{{ super() }}
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ url_for('static', filename='js/ie10-viewport-bug-workaround.js') }}"></script>
<script src="{{ url_for('static', filename='js/typing.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/isotope.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/imagesloaded.js') }}"></script>
<script>
  var strings = new Array("特别的", "好玩的", "有趣的", "让人耳目一新的", "独一无二的", "属于大家的", "让人记忆深刻的", "充满欢乐和感动的") ; // multi words
  var typingSpeed = 100;
  var deleteSpeed = 40;
  var isLoop = ture;'
</script>
<script>
  $('.grid').imagesLoaded( function(){
        $('.grid').isotope({
          itemSelector : '.grid-item',
          layoutMode: 'masonry',
        });
    });
</script>
{% endblock %}